<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ include file="/WEB-INF/jsp/common/_includes.jsp" %>
<jsp:include page="/WEB-INF/jsp/common/_head.jsp"></jsp:include>
<link rel="stylesheet" href="/static/vendor/upload/css/jquery.fileupload.css" type="text/css" />
<div class="ui grid">
	<div class="row">
		<div class="column">
			<div class="ui two column grid">
				<div class="three wide column">
					<jsp:include page="/WEB-INF/jsp/common/_sidebar.jsp">
						<jsp:param name="index" value="104"/>
					</jsp:include>
				</div>
				<div id="container" class="thirteen wide column">
					<div class="alert alert-success w200 center-block text-center " style="display: none; " role="alert"></div>
					<ol class="breadcrumb">
						<li><a href="/">后台管理</a></li>
						<li><a href="/support/agentlist">视频列表</a></li>
						<li class="active">上传代理附件</li>
					</ol>
					<form id="videoForm" class="form-horizontal" method="post" action="/support/agentUpload">
						<div class="form-group">
							<label class="col-sm-2 control-label">文件名称</label>
							<div class="col-sm-5">
								<input type="text" name="fileName" value="" class="form-control" placeholder="请输入文件名称">
							</div>
						</div>
						<div class="form-group">
							<input type="hidden" id="fileUrl" name="fileUrl" value="">
							<label class="col-sm-2 control-label">文件</label>
							<div class="col-sm-2">
								<span class="btn btn-success btn-sm btn-block fileinput-button btn-video" data-loading-text="Loading...">
									<i class="glyphicon glyphicon-plus"></i>
									<span>上传文件</span>
									<input id="fileupload" type="file" name="attachFile" data-url="/img/upload" multiple>
								</span>
							</div>
						</div>
						<div class="form-group" id="videoFileBox" style="display: nkone">
							<div class="col-sm-offset-2 col-sm-5">
								<div class="fileName"></div>
								<div class="progress mb0">
									<div class="progress-bar" style="width: 0%;">0%</div>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"> </label>
							<div class="col-sm-5">
								<label class="error">注：文件大小请不要超过500M</label>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-2 col-sm-offset-2">
								<button class="btn btn-success btn-sm">保存</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<jsp:include page="/WEB-INF/jsp/common/_foot.jsp"></jsp:include>
<script src="/static/vendor/upload/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/vendor/upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/static/vendor/jquery.validate/jquery.validate.js"></script>
<script src="/static/vendor/upload/js/jquery.fileupload.js"></script>
<script type="text/javascript">
	//初始化上传组件
	var videoUploader = $('#fileupload').fileupload({
		dataType : 'json',
		maxFileSize: 500*1024*1024,
		progressall: function (e, data) {
			var progress = parseInt(data.loaded / data.total * 100, 10);
			$('.progress-bar').css('width', progress + '%').text(progress + '%');
		},
		done : function(e, data) {
			if (data.result.status == 'ok') {
				info('文件上传成功！');
				$('#fileUrl').val(data.result.url);
			}else{
				warn(data.result.msg);
			}
		}
	}).bind('fileuploadsend', function (e, data) {
		if(data.total > 500 * 1024 * 1024){
			warn('视频大小请不要超过500M');
			return false;
		}
		$('#videoFileBox').show();
		$('#videoFileBox').find('.fileName').text(data.files[0].name);
		$('#videoFileBox').find('.progress-bar').css('width',  '0%').text('0%');
	});
	
	$('#videoForm').validate({
		rules: {
			fileName: {
				required: true
			}
		},
		messages: {
			fileName: {
				required: "请输入文件名称"
			}
		}
	});
</script>